<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-18 11:08:32
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-18 13:29:22
 * @Description: 
-->
<template>
  <div class="content" ref="contentRef">
    <el-card v-if="!is404">
      <template #header>
        <h1 class="header">{{ noticeDetail.title }}</h1>
        <p class="time">
          <el-icon><Calendar /></el-icon>
          {{ noticeDetail.create_time }}
        </p>
      </template>
      <div v-html="noticeDetail.content"></div>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0"
          ><el-button
            round
            type="success"
            icon="edit"
            style="width: 100%"
            size="large"
            class="btn-font"
            @click="handleEdit"
            >编辑</el-button
          ></el-col
        >
        <el-col :span="12" :offset="0"
          ><el-button
            round
            type="danger"
            icon="delete"
            style="width: 100%"
            size="large"
            class="btn-font"
            @click="handleRemove"
            >删除</el-button
          ></el-col
        >
      </el-row>
    </el-card>

    <div v-if="!is404" class="fixed-box">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="编辑此文章"
        placement="left"
      >
        <el-button
          @click="handleEdit"
          type="success"
          circle
          icon="edit"
          size="large"
        ></el-button>
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="删除此文章"
        placement="left"
      >
        <el-button
          @click="handleRemove"
          type="danger"
          circle
          icon="delete"
          size="large"
        ></el-button>
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="返回顶部"
        placement="left"
      >
        <el-button
          @click="backTop"
          type="primary"
          circle
          icon="Top"
          size="large"
        ></el-button>
      </el-tooltip>
    </div>

    <NotFound v-if="is404" />
  </div>
</template>
 
<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { notice } from "@/api";
import NotFound from "@/components/error/404error.vue";

const route = useRoute();
const router = useRouter();

const id = route.params.id;

const noticeDetail = (await notice.detail({ id })).data;

const contentRef = ref(null)

const is404 = noticeDetail === undefined;

/**
 * @description: 跳转编辑页面
 * @return {*}
 */
const handleEdit = () => {
  router.push(`/notice/edit/${id}`);
};

/**
 * @description: 删除
 * @return {*}
 */
const handleRemove = () => {
  ElMessageBox.confirm(`您是否确认删除 ${noticeDetail.title} ?`, "⚠警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await notice.remove({ id });
      ElMessage({
        type: res.status ? "success" : "error",
        message: res.msg,
      });
      router.push("/notice/list")
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

/**
 * @description: 返回顶部
 * @return {*}
 */
const backTop = () => {
  contentRef.value.parentElement.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};
</script>

<style lang='less' scoped>
.content {
  .header {
    font-size: 40px;
  }
  .time {
    color: var(--el-color-info);
  }
  .fixed-box {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .el-button {
      margin-left: 0;
    }
    .box-item {
      width: 110px;
      margin-top: 10px;
    }
  }
}
</style>
